// 将此文件内容复制到App.js，运行npm start即可查看效果。
import React, { useCallback } from 'react';
import {
  ReactFlow,
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
  BackgroundVariant,
} from 'reactflow';

import 'reactflow/dist/style.css';
const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function App() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [setEdges],
  );

  return (
    <div style={{ height: '500px' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      >
        <Controls />
        <MiniMap 
          nodeColor="#90caf9"                // 节点填充颜色
          nodeStrokeColor="#1e88e5"          // 节点边框颜色
          nodeBorderRadius={6}               // 节点圆角
          maskColor="rgba(144, 202, 249, 0.2)" // 视口遮罩颜色
          style={{
            backgroundColor: 'white',        // 背景色
            border: '1px solid #ccc',        // 边框样式
            borderRadius: '12px'             // 整体圆角
          }}
          nodeSize={12}                      // 节点尺寸
        />
      </ReactFlow>
    </div>
  );
}